<template>
  <view
    class="discount-coupon"
    :class="coupon.couponStatus === 0 ? 'active' : coupon.couponStatus === 1 ? 'inactivity' : 'stale-dated'"
    @click="emits('curClick', coupon)"
  >
    <!-- 角标 -->
    <view class="badge-box">
      <text class="badge">{{ coupon.couponStatus === 0 ? '待使用' : coupon.couponStatus === 1 ? '已使用' : '已过期' }}</text>
    </view>
    <!-- 左侧box -->
    <view class="left-box">
      <view class="oilline"></view>
      <view class="title-box">
        <text class="title">
          {{ coupon.discountType in discountTypeNameObj ? discountTypeNameObj[coupon.discountType] : '未知' }}
        </text>
      </view>
      <view class="oilline"></view>
    </view>
    <!-- 中间竖直虚线和上下半圆样式 -->
    <view class="split-line"></view>
    <!-- 右侧box -->
    <view
      style="
        box-sizing: border-box;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 10px 0;
      "
    >
      <view style="display: flex; justify-content: flex-end; width: 100%; padding-right: 15px">
        <text class="serial-number">编号:{{ coupon.userCouponId }}</text>
      </view>
      <view style="display: flex; align-items: center; justify-content: center; width: 100%">
        <view class="middle-box">
          <view class="oilline"></view>
          <view class="middle-title-box">
            <text class="middle-title">{{ coupon.couponName }}</text>
            <text class="middle-sub-title">{{ coupon.consumeDesc }}</text>
          </view>
          <view class="oilline"></view>
        </view>
        <view class="btn-box">
          <view class="btn-border">
            <mxp-icon v-if="loading" name="jiazai" size="18px" color="#eeeeee"></mxp-icon>
            <text v-else class="text">{{ coupon.couponStatus === 0 ? '立即兑换' : '不可使用' }}</text>
          </view>
        </view>
      </view>
      <text class="data-time">{{ dataTime }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { formatDate } from '@/mxp-ui/mxp-tool/utils/time';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  import { type PropType, computed, ref } from 'vue';
  import type { Coupon } from '@/api/rest';

  defineOptions({
    name: 'discount-coupon',
  });

  const props = defineProps({
    /** 券 */
    coupon: { type: Object as PropType<Coupon>, default: () => ({}) },
  });

  const emits = defineEmits<{
    (e: 'curClick', _coupon: Coupon): void;
  }>();

  const discountTypeNameObj = { 1: '立减卷', 2: '满减卷', 3: '权益券', 5: '免广告券' };

  const loading = ref(false);
  const dataTime = computed(() => {
    const validBeginTime = props.coupon.validBeginTime ? formatDate(props.coupon.validBeginTime * 1000) : undefined;
    const validEndTime = props.coupon.validEndTime ? formatDate(props.coupon.validEndTime * 1000) : undefined;
    if (validBeginTime && validEndTime) {
      return `有效期：${validBeginTime} 至 ${validEndTime}`;
    } else if (validBeginTime) {
      return `有效期:${validBeginTime}前可使用`;
    } else if (validEndTime) {
      return `有效期:${validEndTime}后可使用`;
    } else {
      return '';
    }
  });
</script>

<style scoped lang="scss">
  @keyframes scale {
    0% {
      transform: scale(0.9);
    }

    100% {
      transform: scale(1);
    }
  }

  .discount-coupon {
    position: relative;
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 280rpx;
    margin: 0 auto;
    margin-bottom: 15px;
    overflow: hidden;
    background: linear-gradient(135deg, #db5d73 0%, #891d22 100%);
    border-radius: 20rpx;

    .oilline {
      width: 100%;
      height: 2rpx;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff1db, rgba(255, 255, 255, 0));
    }
  }

  .badge-box {
    position: absolute;
    top: -80rpx;
    left: -80rpx;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 160rpx;
    height: 160rpx;
    padding-bottom: 16rpx;
    transform: rotate(-45deg);

    .badge {
      font-size: 30rpx;
      font-weight: bold;
      line-height: 30rpx;
      color: #741217;
    }
  }

  .left-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 100%;
    overflow: hidden;

    .title-box {
      padding: 10rpx 0;

      .title {
        font-size: 48rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }

  /* 中间竖直虚线和上下半圆样式 */
  .split-line {
    position: relative;
    height: 100%;
    margin: 0 10rpx;
    border-left: 4rpx dashed #ffffff;

    /* 给虚线加两个半圆伪类，基本样式如下 */
    &:before,
    &:after {
      position: absolute;
      left: -14rpx;
      z-index: 1;
      width: 24rpx;
      height: 16rpx;
      content: '';
      background: #f8f8f8;
    }

    &:before {
      top: -4rpx;
      border-radius: 0 0 16rpx 16rpx;
    }

    &:after {
      bottom: -4rpx;
      border-radius: 16rpx 16rpx 0 0;
    }
  }

  .middle-box {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 0 20rpx;

    .middle-title-box {
      flex: 1;
      padding: 24rpx 0;
      text-align: center;

      .middle-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 30rpx;
        font-weight: bold;
        color: #ffffff;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .middle-sub-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 24rpx;
        font-weight: bolder;
        color: #ffffff;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }

  .data-time {
    font-size: 10px;
    color: #fae8e8;
  }

  .serial-number {
    font-size: 12px;
    color: #f6dc35;
  }

  .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 120rpx;
    margin-right: 10px;
    border-radius: 50%;

    .btn-border {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 100rpx;
      padding: 18rpx;
      border-radius: 50%;

      .text {
        font-size: 28rpx;
        font-weight: bolder;
        line-height: 36rpx;
        text-align: center;
      }
    }
  }

  .active {
    background: linear-gradient(135deg, #cb4d62 0%, #7b161b 100%);

    .badge-box {
      background: linear-gradient(38deg, #fcd57b, #f5e7ca);

      .badge {
        color: #741217;
      }
    }

    .btn-box {
      color: #910a11;
      background: linear-gradient(45deg, #f7edd9 0%, #f4dba0 100%);
      box-shadow: 0 2px 29px 0 #5e0c10;
      animation: scale 0.8s ease-in-out infinite alternate;

      .btn-border {
        border: 1rpx solid #c3131c;
      }
    }
  }

  .inactivity {
    background: linear-gradient(135deg, #72777b 0%, #413546 100%);

    .badge-box {
      background: linear-gradient(38deg, #d0cdc8, #868483);

      .badge {
        color: #666666;
      }
    }

    .data-time {
      color: #ebebeb;
    }

    .serial-number {
      color: #ffffff;
    }

    .oilline {
      background: linear-gradient(to right, rgba(55, 14, 14, 0), #85827e, rgba(255, 255, 255, 0));
    }

    .btn-box {
      color: #ffffff;
      background: #535464;
      box-shadow: 0 2px 29px 0 #1e1337;

      .btn-border {
        border: 1rpx solid #988677;
      }
    }
  }

  .stale-dated {
    background: linear-gradient(135deg, #666161 0%, #352626 100%);

    .badge-box {
      background: linear-gradient(38deg, #d0cdc8, #868483);

      .badge {
        color: #666666;
      }
    }

    .data-time {
      color: #ebebeb;
    }

    .serial-number {
      color: #ffffff;
    }

    .oilline {
      background: linear-gradient(to right, rgba(55, 14, 14, 0), #85827e, rgba(255, 255, 255, 0));
    }

    .btn-box {
      color: #ffffff;
      background: #535464;
      box-shadow: 0 2px 29px 0 #1e1337;

      .btn-border {
        border: 1rpx solid #988677;
      }
    }
  }
</style>
